<template>
	<view>
		<h1>{{ detail.title }}</h1>
		<view class="title">
			<view class="circular"><image :src="detail.healthimage" mode=""></image></view>
			<p class="text">{{ detail.healthName }}</p>
			<view class="button">+ 关注</view>
		</view>
		<view class="content" v-html="detail.content"></view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			detail: {}
		};
	},
	mounted() {
		let uid = this.$mp.query.id;
		uni.request({
			url: `https://jktt-api.jianke.com/m/articles/${uid}`,
			method: 'GET',
			success: res => {
				this.detail = res.data.data;
			}
		});
	},
	methods: {
		getRef() {
			console.log(this.$refs.content);
		},
	}
};
</script>

<style lang="scss">
h1 {
	padding: 20rpx;
	 // margin-left: 60upx;
	 font-size: 40upx;
	 font-weight: 700;
	 margin-bottom: 30upx;
	 text-align: center;
}
.title {
	width: 100%;
	height: 120upx;
}
.circular {
	width: 120upx;
	height: 120upx;
	border-radius: 50%;
	background-color: #007aff;
	margin-left: 20upx;
	float: left;
	image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
}
.text {
	color: #85898d;
}
p {
	float: left;
	text-align: center;
	line-height: 120upx;
	margin-left: 10upx;
}
.button {
	width: 150upx;
	height: 52upx;
	background-color: #0bd68c;
	float: right;
	text-align: center;
	line-height: 52upx;
	border-radius: 36upx;
	margin-top: 28upx;
	color: #ffffff;
	margin-right: 5upx;
}
.content{
	padding:20rpx 15rpx;
	p{
		text-indent: 50rpx;
	}
}
</style>
